<!-- 售后详情 -->
<template>
	<container
		class="aftersale-detail"
		:isNoData="isNodata"
		:isLoading="loading&&this.refundInfo.id!=='undefined'"
		@btnClick="init"
		:nodataOption="{
			type: 'hasbtn',
			iconBottom: '40rpx',
			text: '无数据',
			btnText: '刷新'
		}"
	>
		<mescroll-body
			ref="mescrollRef"
			@init="mescrollInit"
			:down="{
				auto: false,
				bgColor: '#fff'
			}"
			:up="{
				auto: false,
				use: false
			}"
			@down="downLoad"
		>
			<view class="act-status">
				<view class="act-status-act">
					<image class="icon" :src="'/static/1_68.png'" mode=""></image>
					<text class="text">{{ getRefundTypeText(refundInfo.serveType) }}-{{ getRefundStatusText(refundInfo.refundState) }}</text>
				</view>
				<view class="sign" v-if="refundInfo.serveType != 2 && (refundInfo.refundState == 1 || refundInfo.refundState == 2)">
					零钱支付的退款30分钟内到账，银行卡支付三个工作日到账，请耐心等候！
				</view>
				<view class="track-num" v-if="refundInfo.refundBillwayNo">快递单号：{{ refundInfo.refundBillwayNo }}</view>
			</view>
			<view class="aftersale-content">
				<view class="order-info">
					<uniForms class="form">
						<formListItem
							class="item"
							:label-width="150"
							:read-only="true"
							:label="'服务单号'"
							placeholder="未填写"
							:input-text-align="'right'"
							:value="refundInfo.refundNo"
						></formListItem>
						<formListItem
							class="item"
							:read-only="true"
							:label-width="150"
							:label="'申请时间'"
							placeholder="未填写"
							:input-text-align="'right'"
							:value="refundInfo.createTime"
						></formListItem>
						<formListItem
							class="item"
							:label-width="150"
							:read-only="true"
							:label="'订单编号'"
							placeholder="未填写"
							:input-text-align="'right'"
							:value="refundInfo.orderNo"
						></formListItem>

						<formListItem
							class="item"
							:read-only="true"
							:label-width="150"
							:label="getRefundTypeText(refundInfo.serveType) + '原因'"
							placeholder="未填写"
							:input-text-align="'right'"
							:value="refundInfo.refundReason"
						></formListItem>

						<formListItem
							class="item"
							v-if="refundInfo.refundDescribe"
							:read-only="true"
							:label-width="150"
							:label="'描述问题'"
							:placeholder="''"
							:input-text-align="'right'"
							:value="' '"
						></formListItem>
						<formListItem
							v-if="refundInfo.refundDescribe"
							class="item"
							type="textarea"
							:read-only="true"
							:label-width="150"
							:placeholder="''"
							:value="refundInfo.refundDescribe"
						></formListItem>

						<formListItem
							class="item"
							v-if="refundInfo.rejectReason"
							:read-only="true"
							:label-width="200"
							:label="'拒绝退货原因'"
							:placeholder="''"
							:input-text-align="'right'"
							:value="' '"
						></formListItem>
						<formListItem
							v-if="refundInfo.rejectReason"
							class="item"
							type="textarea"
							:read-only="true"
							:label-width="150"
							:placeholder="''"
							:value="refundInfo.rejectReason"
						></formListItem>
					</uniForms>
				</view>

				<view class="good-close-card">
					<!-- 商品结算卡片 -->
					<view class="goods-list">
						<navigator class="good-item" :url="'/pages/goods/goods?name=' + item.name" hover-class="none" :key="index" v-for="(item, index) in refundInfo.refundGoods">
							<goods-item
								type="cross"
								:name-size="36"
								:name-row-num="2"
								:good-num="item.refundCount"
								:img="imgHost + item.goodsPic"
								:img-width="'150rpx'"
								:img-height="'200rpx'"
								:price="item.refundMoney"
								:name="item.goodsName"
							></goods-item>
						</navigator>
					</view>

					<view class="total">
						<view class="numerical">
							<text class="total-num" v-if="refundInfo.refundGoods">共{{ refundSum }}件</text>
							<view class="sumpay" v-if="refundInfo.serveType == 1">
								<text class="label">退款总金额小计</text>
								<text class="symbol">¥</text>
								<text class="num">{{ refundInfo.applyMoney ? refundInfo.applyMoney : refundInfo.refundMoney }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="imgPreView"><htz-image-upload :name="'file'" :readonly="true" :max="3" :choose-num="3" v-model="imgPreViews" :action="''"></htz-image-upload></view>
			</view>
			<view class="detail-tools" v-if="refundInfo.serveType != 0 && (refundInfo.refundState == 1 || refundInfo.refundState == 4)">
				<!-- <button class="btn btn-orange-line" @click="cancelOpen">取消订单</button> -->

				<button class="btn btn-orange" v-if="refundInfo.serveType != 0 && refundInfo.refundState == 1" @click="goToEditBill">填写发货单</button>

				<button class="btn btn-orange" v-if="refundInfo.refundState == 4" @click="deliveryOpen">确认送达</button>
			</view>
			<!-- <uni-popup ref="cancelPopup" type="center">
			<uni-popup-dialog mode="base" title="取消订单" content="确定要取消订单吗?" :duration="2000" :before-close="true" @close="cancelClose" @confirm="cancelConfirm"></uni-popup-dialog>
		</uni-popup> -->
			<uni-popup ref="deliveryPopup" type="center">
				<uni-popup-dialog
					mode="base"
					title="确认送达"
					content="确认商品已送达?"
					:duration="2000"
					:before-close="true"
					@close="deliveryClose"
					@confirm="deliveryConfirm"
				></uni-popup-dialog>
			</uni-popup>
		</mescroll-body>
	</container>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import container from '@/components/container/container.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniPopupDialog from '@/components/uni-popup-dialog/uni-popup-dialog.vue';
import uniForms from '@/components/uni-forms/uni-forms.vue';
import formListItem from '@/components/form-list-item/form-list-item.vue';
import goodsItem from '@/components/goods-item/goods-item.vue';
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue';
export default {
	mixins: [MescrollMixin],
	components: {
		container,
		uniPopup,
		uniPopupDialog,
		uniForms,
		formListItem,
		goodsItem,
		htzImageUpload
	},
	data() {
		return {
			imgHost: this.$imgHost,
			loading: false,
			id: '', //订单id
			refundNo: '', //服务单号
			// type: 'cancel', //类型 售后类型 取消：cancel 退货 return 换货 exchange 退款 returnPrice
			serveTypes: this.$store.state.aftersaleModule.serveTypes,
			aftersaleStatus: this.$store.state.aftersaleModule.aftersaleStatus,
			// actStatus: {
			// 	// 当期状态
			// 	icon: '/static/1_68.png',
			// 	text: '审核通过'
			// },
			// actSteps: 1, //当期步骤
			// stepsItems: [
			// 	{
			// 		//步骤项
			// 		title: '已付款',
			// 		icon: '/static/1_20.png',
			// 		activeIcon: '/static/1_07.png'
			// 	},
			// 	{
			// 		title: '已发货',
			// 		icon: '/static/1_11.png',
			// 		activeIcon: '/static/1_24.png'
			// 	},
			// 	{
			// 		title: '已收货',
			// 		icon: '/static/1_22.png',
			// 		activeIcon: '/static/1_09.png'
			// 	},
			// 	{
			// 		title: '已完成',
			// 		icon: '/static/1_13.png',
			// 		activeIcon: '/static/1_26.png'
			// 	}
			// ],
			// goodList: [
			// 	{
			// 		img: '/static/pic4.png',
			// 		price: 3199,
			// 		orgprice: 3299,
			// 		name: '华为po30',
			// 		moneySymbol: '¥',
			// 		content: 'Huawei/华为MatePad Pro平板电脑笔记本二合一新品轻薄全面屏影音无线充电'
			// 	}
			// ],
			// closeInfo: {
			// 	//结算信息
			// 	note: '', //备注
			// 	total: '', //商品总额
			// 	postage: '', //配送费
			// 	invoice: '' //发票信息
			// },
			// orderInfo: {
			// 	serverNum: '', //服务单号
			// 	applyDate: '', //申请时间
			// 	orderNum: '', //订单编号
			// 	returnReason: '', //退货原因
			// 	problemDescription: '无' //问题描述
			// },
			refundInfo: {
				// applyMoney: null
				// barterAddressId: null
				// barterBillwayNo: null
				// barterFastMail: null
				// beginTime: null
				// createBy: ""
				// createTime: "2021-01-16 22:13:16"
				// disposeDate: null
				// disposeUserId: null
				// endTime: null
				// freightType: 0
				// id: 1
				// identifyDate: null
				// identifyUserId: null
				// orderNo: "6748936548869210112"
				// orderPrise: null
				// params: {}
				// refundAddressId: null
				// refundBillwayNo: null
				// refundDescribe: ""
				// refundFastMail: null
				// refundGoods: null
				// refundImg: null
				// refundMoney: 0.01
				// refundNo: "6749466550685794304"
				// refundReason: "发票问题"
				// refundState: 0
				// refundUserid: 3
				// rejectReason: null
				// remark: null
				// searchValue: null
				// serveType: 1
				// updateBy: ""
				// updateTime: null
			},
			imgPreViews: [
				// 预览图片组
			]
		};
	},
	computed: {
		isNodata() {
			return this.refundInfo.id != undefined && this.refundInfo.id != null ? false : true;
		},
		imgRefunds() {
			if (this.refundInfo.refundImg) return this.refundInfo.refundImg.split(',');
		},
		refundSum() {
			// 退货商品总数
		
			let result = 0;
			if(this.refundInfo&&this.refundInfo.refundGoods&&this.refundInfo.refundGoods.length>0)
			this.refundInfo.refundGoods.forEach(item => {
				if(item.refundCount!=undefined&&item.refundCount!=null)
				result = result + item.refundCount;
			});
		
			return result;
		},
	},
	watch: {
		imgRefunds(newVal, oldVal) {
			this.imgPreViews = newVal.map(item => {
				return {
					url: this.$HOST + item
				};
			});
		}
	},
	methods: {
		// cancelOpen() {
		// 	// 取消订单 弹出
		// 	this.$refs.cancelPopup.open();
		// 	console.log('打开窗口');
		// },
		// cancelClose(done) {
		// 	// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 done 才会关闭对话框
		// 	console.log('关闭');
		// 	done()
		// },
		// /**
		//  * 点击确认按钮触发
		//  * @param {Object} done
		//  * @param {Object} value
		//  */
		// cancelConfirm(done, value) {
		// 	// 输入框的值
		// 	console.log(value);
		// 	// TODO 做一些其他的事情，手动执行 done 才会关闭对话框
		// 	console.log('提交');
		// 	done()
		// },
		init() {
			this.loading = true;
			this.getAftersale()
				.then(res => {
					this.loading = false;
				})
				.catch(err => {
					this.loading = false;
				});
		},
		downLoad() {
			console.log('onPullDownRefresh');
			this.getAftersale()
				.then(res => {
					this.mescroll.endSuccess();
				})
				.catch(err => {
					this.mescroll.endErr();
				});
		},
		getRefundTypeText(status) {
			let item = this.$Lodash.find(this.serveTypes, {
				val: status
			});
			if (item) return item.label;
			else return '';
		},
		getRefundStatusText(status) {
			let item = this.$Lodash.find(this.aftersaleStatus, {
				val: status
			});
			if (item) return item.label;
			else return '';
		},
		getAftersale() {
			// 获取售后信息
			// this.loading = true;
			return this.$store
				.dispatch('getOrderRefundInfo', { id: this.id, orderNo: this.refundInfo.orderNo })
				.then(res => {
					console.log('获取订单售后信息成功', res);
					// this.loading = false;
					let data = res.data.data;
					this.refundInfo = data;
				})
				.catch(err => {
					// this.loading = false;
				});
		},

		deliveryOpen() {
			// 确认送达弹出
			this.$refs.deliveryPopup.open();
			console.log('打开窗口');
		},
		deliveryClose(done) {
			// 确认送达 关闭
			console.log('关闭');

			done();
		},
		/**
		 * 点击确认按钮触发
		 * @param {Object} done
		 * @param {Object} value
		 */
		deliveryConfirm(done, value) {
			// 确认送达提交
			console.log(value);
			this.$store
				.dispatch('editRefundState', {
					orderNo: this.refundInfo.orderNo,
					refundNo: this.refundNo,
					serveType: this.refundInfo.serveType,
					status: 5
				})
				.then(res => {
					console.log('确认送达', res);
					uni.redirectTo({
						url: '/pages/order/order-list?currentTab=4'
					});
				});
			done();
		},
		goToEditBill() {
			// 去编辑发货单
			uni.navigateTo({
				url: `/pages/aftersale/aftersale-dispatch-bill?id=${this.id}&refundNo=${this.refundNo}&orderNo=${this.refundInfo.orderNo}&serveType=${this.refundInfo.serveType}`
			});
		}
	},
	onLoad(option) {
		if (option.id) this.id = option.id;
		if (option.refundNo) this.refundNo = option.refundNo;
		this.getAftersale();
	}
};
</script>

<style lang="scss" scoped>
.aftersale-detail {
	margin-bottom: 100rpx;
	.icon {
		width: 40rpx !important;
		height: 40rpx !important;
		margin-right: 20rpx;
	}
	.track-num {
		font-size: 28rpx;
		color: #46494d;
		text-align: center;
		width: 100%;
		margin-top: 20rpx;
	}
	.aftersale-content {
		padding: 0rpx 20rpx 20rpx 20rpx;
		.imgPreView {
			background-color: #ffffff;
			margin-top: 20rpx;
			border-radius: 6rpx;
		}
	}
	.order-info {
		// border-bottom: 2rpx solid #efeff0;
		background-color: #fff;
		// margin-top: 20rpx;
		border-radius: 6px;
		.form {
			width: 100%;
			box-sizing: border-box;
			padding: 0rpx 20rpx;
			.item {
				display: flex;
				width: 100%;
				padding: 0rpx 20rpx;
				background-color: #fff;
				box-sizing: border-box;
			}
			.item:nth-child(1) {
				border-radius: 8px 8px 0px 0px;
			}
			.item:nth-last-child(1) {
				border-radius: 0px 0px 8px 8px;
			}
			.item:nth-last-child(n + 2) {
				border-bottom: 2rpx solid #efeff0;
			}
		}
	}
}
</style>
